import React, { Suspense, useEffect, useState } from "react";
import styles from "./index.module.scss";
import { Button, Image, ProgressBar, Skeleton } from "antd-mobile";
import { DownFill } from "antd-mobile-icons";
import { Await, useAsyncValue, useLoaderData, useNavigate } from "react-router-dom";

type Props = {};

export default function index({}: Props) {
  const loaderData = useLoaderData();
 
  return (
    <Suspense fallback={
      <>
         <Skeleton.Title animated />
        <Skeleton.Paragraph lineCount={5} animated />
        <Skeleton.Paragraph lineCount={5} animated />
        <Skeleton.Paragraph lineCount={5} animated />
        <Skeleton.Paragraph lineCount={5} animated />
      </>
    }>
      <Await children={<Child />} resolve={(loaderData as any).getData()}></Await>
    </Suspense>
  );
}

function Child() {
  const homeData = useAsyncValue() as IHomeData
  
  const navigate = useNavigate()
  return (
    <div className={[styles.container, "qd_overall"].join(" ")}>
      {/* 标题1 */}
      <div className="qd_title1_area">
        <div className="qd_title1_text_left">{ homeData.exam.title }</div>
        <div className="qd_title1_text_right" onClick={()=> navigate("/toggle?actionCode="+ homeData.exam.actionCode + "&default=" +  homeData.exam.title) }>
          切换考试科目
          <span className="qd_title1_text_right_arrow">
            <DownFill fontSize={10} />
          </span>
        </div>
      </div>
      {/* 学习信息 */}
      <div className="qd_study_area">
        <div className="qd_study_title">欢迎Tomato来到{homeData.exam.info}学习库!</div>
        <div className="qd_study_img_area">
          <Image src="./images/home/xiaolang.png" fit="fill" />
        </div>
        <div className="qd_study_total">
          <span className="qd_study_total_text_left">已学{homeData.exam.invalid}题</span>
          <span className="qd_study_total_text_const">|</span>
          <span className="qd_study_total_text_right">共{homeData.exam.itemCount}题</span>
        </div>
        <div className="qd_study_num_left">
          <div className="qd_study_num">{homeData.collect}</div>
          <div className="qd_study_num_topic">错题</div>
        </div>
        <div className="qd_study_num_right">
          <div className="qd_study_num">{homeData.wrong}</div>
          <div className="qd_study_num_topic">收藏</div>
        </div>
      </div>
      {/* nav导航 */}
      <div className="qd_nav_area">
        <div className="qd_nav_img_area">
          <Image src="./images/home/examination.png" fit="fill" />
        </div>
        <div className="qd_nav_img_area">
          <Image src="./images/home/books.png" fit="fill" />
        </div>
        <div className="qd_nav_img_area">
          <Image src="./images/home/practice.png" fit="fill" />
        </div>
      </div>
      {/* 标题2 */}
      <div className="qd_title2_area">
        <div className="qd_title2_text_left">学科题库</div>
        <div className="qd_title2_text_right">坚持每一天，成长看得见</div>
      </div>
      {/* 练习列表 */}
      <div className="qd_practice_area">
        {homeData?.exemItems.map((item) => {
          return (
            <div className="qd_practice_list" key={item.id}>
              <div className="qd_practice_list_left">
                <Image src="./images/home/subject.png" fit="fill" />
              </div>
              <div className="qd_practice_list_conter">
                <div className="qd_practice_list_conter_title">
                  {item.title}
                </div>
                <div className="qd_practice_list_conter_total">
                  {item.invalid}/{item.itemCount}题
                </div>
                <div className="qd_practice_list_conter_progress">
                  <ProgressBar percent={ (item.itemCount - item.invalid) / item.itemCount} />
                </div>
              </div>
              <div className="qd_practice_list_right">
                <Button color="primary" fill="solid" onClick={()=> navigate("/pratice?actionCode="+ item.actionCode) }>
                  练习
                </Button>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

interface IHomeData {
  exam: Exam;
  exemItems: ExemItem[];
  collect: number;
  wrong: number;
  study: number;
}

interface ExemItem {
  id: number;
  pid: number;
  businessLevel?: any;
  numberLevel: number;
  title: string;
  info: string;
  actionCode: string;
  actionType: string;
  actionName: string;
  createTime: string;
  updateTime?: string;
  invalid: number;
  sort: number;
  createUser: string;
  tenantId?: any;
  itemCount: number;
}

interface Exam {
  id: number;
  pid?: any;
  businessLevel?: any;
  numberLevel: number;
  title: string;
  info: string;
  actionCode: string;
  actionType: string;
  actionName: string;
  createTime: string;
  updateTime: string;
  invalid: number;
  sort: number;
  createUser: string;
  tenantId?: any;
  itemCount: number;
}
